<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科名振美学生课堂反馈表</title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			width: 800px;
			height: 1280px;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: #409eff;
			border-radius: 10px;
			padding-top: 20px;
			padding-left: 20px;
			padding-bottom: 20px;
			padding-right: 20px;
		}
		.title{
			font-size: 18px;
			color: #fff;
			text-align: center;
			display: block;
            
		}
		.content{
			padding-top: 20px;
			margin-top: 20px;
			background-color: #fff;
			border-radius: 10px;
			height: 1050px;
		}
		.title1{
			font-size: 16px;
			  font-weight: 700;
			    color: #fff;
			    background: #edc33c;
			    height: 60px;
			    line-height: 60px;
			    padding: 5px 30px;
				margin-top: 20px;
		}
		.biaoge{
			padding: 0;
			font-weight: 700;
			    font-size: 16px;
			    color: #000;
				margin-bottom: 5px;
		}
		input{
			border: 0px;
			font-size: 14px;
			color: #303133;
		}
		/* 去掉默认样式 */
		input {
		  -webkit-appearance: none;
		  border: none;
		  outline: none;
		  cursor: pointer;
		}
		
		:root {
		  /*高亮颜色*/
		  --main: #ffa822;
		  /*默认颜色*/
		  --basic: #999;
		}
		
		.rate-content input[name="rate"] {
		 
		  font-family: "iconfont";
		  /*之前引入的iconfont字体*/
		  font-size: 30px;
		  padding-right: 10px;
		}
		
		.rate-content input[name="rate"]::after {
		  content: "🌟";
		  color: var(--basic);
		  /*加点颜色过渡效果*/
		  transition: color .4s ease;
		}
		
		/* 实现选中单个星星 */
		/* 高亮的星星 */
		input[name="rate"]:checked::after,
		input[name="rate"]:checked~input[name="rate"]::after {
		  /*实现连同兄弟元素一起高亮*/
		  content: "🌟";
		  color: var(--main);
		}
		
		/* 把input反向排列 */
		.rate-content {
		  display: flex;
		  flex-flow: row-reverse;
		}
		
		input[name="rate"] {
		  margin-right: 10px;
		  transition: transform .2s ease;
		}
		
		input[name="rate"]:checked,
		input[name="rate"]:hover::after {
		  content: "🌟";
		  color: var(--main);
		}
		
		/* 兄弟元素一起高亮 */
		input[name="rate"]:hover~input[name="rate"]::after {
		  content: "🌟";
		  color: var(--main);
		}
		
		input[name="rate"]:checked,
		input[name="rate"]:hover {
		  transform: scale(1.2);
		}
		textarea{
			border: 0;
		}
		.footer{
			margin-top: 20px;
			padding-left: 50px;
			border: 1px;
			height: 500px;
			width: 800px;
		}
		img{
			width: 120px;
			height: 120px;
		}
		option{
			border: 0;
		}
		.selected{
			/* 去掉三角 */
			appearance:none;
			-moz-appearance:none; /* Firefox */
			-webkit-appearance:none; /* Safari 和 Chrome */
			/* 去掉边框 */
			  	border: 0;
				display: block;
				position: relative;

		}
		#box{
			border: 1px solid #000000;
		}
		td{
			margin-bottom: 5px;
		}
		img{
			padding-bottom: 50px;
		}
		.div1 {
			position: absolute;
			top: 0px;
			margin-top: -10px;
		}
		.biaoge2{
			margin: 0;
			padding: 0;
		}
		#nnn{
			margin-top: 30px;
		}
		#text1{
			position: absolute;
			left: 46%;
			top: 1200px;
		}
		#text2{
			position: absolute;
			left: 46%;
			top: 1260px;
		}
		span{
			margin: 0;
			padding: 0;
		}
	</style>
	<body>
		<div class="head">
			<div class="div1">
				<img src="./img/title.png" style="width: 100px; height: 80px;" />
			</div>
			<span class="title">科名振美学生上课反馈情况表</span>
			<div class="content">
				<span class="title1">学生信息</span>
				<table cellspacing="10">
					<tr>
						<td class="biaoge">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生：</td>
						<td width="300px"><input type="text"></td>
						<td class="biaoge">老&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;师：</td>
						<td width="300px">
							<select class="selected">
								<option>吴老师</option>
								<option>徐老师</option>
								<option>杨老师</option>
								<option>刘老师</option>
							</select>
						</td>
					</tr>
					<tr>
						<td width="120px" class="biaoge">上课时间：</td>
						<td width="300px">
							<input type="date" value="2020-11-18" />
						</td>
						<td width="120px" class="biaoge">已用课次：</td>
						<td width="300px"><input type="text"></td>
					</tr>
				</table>
				<span width="120px" class="title1">课程信息</span>
				<table cellspacing="10">
					<tr>
						<td class="biaoge">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程：</td>
						<td width="300px">
							<select class="selected">
                                <option>99体验课</option>
								<option>ScratchL1</option>
								<option>ScratchL2</option>
								<option>ScratchL3</option>
								<option>ScratchL4</option>
								<option>Python课程</option>
							</select>
						</td>
						<td class="biaoge">章&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;节：</td>
						<td width="300px">
							<select class="selected" id="select">
                                <option id="one" value="img/01.png">小猫钓鱼</option>
                                <option value="img/03.png">小小钢琴家</option>
								<option value="img/04.png">海底总动员</option>
                                <option value="img/05.png">点亮LED</option>
								<option value="img/1.png">第01课 奥运五环</option>
								<option value="img/2.png">第02课 旋转风车</option>
								<option value="img/3.png">第03课 疫情小贴士</option>
								<option value="img/4.png">第04课 行走的流程图</option>
								<option value="img/5.png">第05课 小小画家</option>
								<option value="img/6.png">第06课 钟表世界</option>
								<option value="img/7.png">第07课 猫抓老鼠</option>
								<option value="img/8.png">第08课 熊猫滚滚</option>
								<option value="img/9.png">第09课 多彩图形</option>
								<option value="img/10.png">第10课 测评课</option>
								<option value="img/11.png">第11课 星空砖头-1</option>
								<option value="img/12.png">第12课 星空砖头-2</option>
								<option value="img/13.png">第13课 泼墨成画</option>
								<option value="img/14.png">第14课 欢乐马戏团</option>
								<option value="img/15.png">第15课 龟兔赛跑</option>
								<option value="img/16.png">第16课 飞机大战</option>
								<option value="img/17.png">第17课 疯狂的赛车</option>
								<option value="img/18.png">第18课 马里奥踩云朵</option>
								<option value="img/19.png">第19课 怪物猎手—特效</option>
								<option value="img/20.png">第20课 吃豆人</option>
								<option value="img/py1.png">第1课 海龟绘图1</option>
								<option value="img/py2.png">第2课 海龟绘图2</option>
								<option value="img/py3.png">第3课 变量</option>
								<option value="img/py4.png">实战贪吃蛇</option>
							</select>
						</td>
					</tr>
					<tr>
						<td width="120px" class="biaoge" valign="top">上课内容：</td>
						<td colspan="3" width="300px">
							<img id="img" src="img/1.png" style="width: 450px; height: 390px;"/>
						</td>
					</tr>
				</table>
				<span class="title1">课程评语</span>
				<table cellspacing="10">
					<tr>
						<td class="biaoge" valign="top">课程评语：</td>
						<td colspan="3" width="300px"><textarea cols="4" style="width: 598px; height: 130px;"></textarea></td>
					</tr>
				</table>
				<span class="title1">课后作业</span>
				<table cellspacing="10">
					<tr>
						<td class="biaoge" valign="top">课后作业：</td>
						<td colspan="3" width="300px"><textarea cols="4" style="width: 598px; height: 40px;"></textarea></td>
					</tr>
				</table>
			</div>
			<div class="footer">
				<img id="nnn" src="./img/weima.png">
				<span id="text1">电话：0571-82570238</span>
				<span id="text2">地址：浙江省杭州市萧山区建设四路与长池头路交叉口西侧</span>
			</div>
		</div>
		</div>
	</body>
	<script>
		var select=document.getElementById("select");
		var img=document.getElementById("img");
		select.onchange=function(){
			console.log(1);
			img.setAttribute("src",this.value);
		}
	</script>
</html>
